<%--
  Created by IntelliJ IDEA.
  User: 24255
  Date: 2019/8/22
  Time: 23:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ACG联动文化</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content=""/>

    <!-- css files -->
    <link rel="stylesheet" href="${path}/static/bootstrap/css/bootstrap.css" type="text/css" media="all">
    <!-- Owl-Carousel-CSS -->
    <link rel="stylesheet" href="${path}/static/css/user/style.css" type="text/css" media="all" />
    <link href='${path}/static/css/user/simplelightbox.min.css' rel='stylesheet' type='text/css'>
</head>
<body>
<jsp:include page="navigation.jsp"></jsp:include>
<!-- welcome -->
<div class="about" id="about">
    <div class="container">
        <h3 class="agile-title">Welcome</h3>
        <div class="about-top w3ls-agile">
            <div class="col-md-6 red">
                <img class="img-responsive" src="/static/images/about/ab.jpg" alt="">
            </div>
            <div class="col-md-6 come">
                <div class="about-wel">
                    <h5>几句话关于我们的
                        <span>ACG联动文化</span>
                    </h5>
                    <p>最近一段时间来，一些ACG主题餐饮店品牌在全国多个主要城市陆续开业，
                        获得了不少二次元爱好者的关注。对于广大的二次元爱好者来说，ACG主
                        题餐饮店与各类动漫游戏展、主创见面会、女仆咖啡厅等线下活动一样，
                        都是他们在平日里休闲聚会的好去处。在周末闲暇时间“进店打卡”，不仅
                        能充分释放自己内心的“厨力”，同时也因其他进店的消费者们都是同好，
                        所以其带来的社交附加值，其实远比店内销售的菜品、甜品、衍生周边高
                        得多。
                        </p>
                    <ul>
                        <li>
                            <i class="glyphicon glyphicon-ok"></i>多元化商业开发</li>
                        <li>
                            <i class="glyphicon glyphicon-ok"></i>“二次元浓度”都特别高</li>
                        <li>
                            <i class="glyphicon glyphicon-ok"></i>热度波浪变化</li>
                        <li>
                            <i class="glyphicon glyphicon-ok"></i>低成本短期运营</li>
                    </ul>
                </div>
                <div class="button-styles">
                    <a href="#cat" data-toggle="modal" data-target="#Catbtn">联动元素</a>
                    <a href="#dog" data-toggle="modal" data-target="#Dogbtn">餐厅元素</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Gallery -->
<div id="gallery" class="gallery">
    <div class="container">
        <h3 class="agile-title">Gallery</h3>
    </div>
    <div class="agileinfo-gallery-row">
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/c1.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/c1.jpg" alt="" title="Cat Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/d1.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/d1.jpg" alt="" title="Dog Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/c2.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/c2.jpg" alt="" title="Cat Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/d2.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/d2.jpg" alt="" title="Dog Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/c3.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/c3.jpg" alt="" title="Cat Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/d3.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/d3.jpg" alt="" title="Dog Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/c4.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/c4.jpg" alt="" title="Cat Life Image" />
            </a>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-4 w3gallery-grids">
            <a href="/static/images/about/d4.jpg" class="imghvr-hinge-right figure">
                <img src="/static/images/about/d4.jpg" alt="" title="Dog Life Image" />
            </a>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!-- Modal5 -->
<div class="modal fade" id="Catbtn" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="modal-info">
                    <h4>The specials</h4>
                    <img src="/static/images/about/c.jpg" alt=" " class="img-responsive" />
                    <p class="para-agileits-w3layouts">
                        联动是指将日常的餐厅饮食与热门的动漫潮牌文化相结合，在增加餐厅知名度的同时也给相应的游戏动漫公司带来可观收入的一种销售方式
                        ，大面积的落地窗,展露出室内外景观互动的珍稀性,在设计语言中,也增加了“虚实对比”这一重要表现形式。“单一的餐饮品牌很难做到百年
                        品牌，所以如何去讨好新生代、满足新生代，是包括餐饮业在内的很多行业都要去解决的问题。”
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal5 -->
<div class="modal fade" id="Dogbtn" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <div class="modal-info">
                    <h4>The food</h4>
                    <img src="/static/images/about/d.jpg" alt=" " class="img-responsive" />
                    <p class="para-agileits-w3layouts">
                        今早我走进麦当劳，店员姐姐问我来点什么，这里有鲜虾堡、吉士堡、猪肘堡、鸡腿堡、牛肉堡、鳕鱼，我的眼泪流了下
                        来，她不能明白我的难过，这里有这么多堡，可我只想要我的可爱坂宝……😭（来自B站网友）
                        不多说，你细品。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //Gallery -->
<!-- js -->
<script src="${path}/static/js/jquery-3.4.1.min.js"></script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Necessary-JavaScript-File-For-Bootstrap -->
<!-- //js -->

<!-- simple-lightbox -->
<script src="${path}/static/js/user/simple-lightbox.min.js"></script>
<script>
    $(function () {
        var gallery = $('.agileinfo-gallery-row a').simpleLightbox({
            navText: ['&lsaquo;', '&rsaquo;']
        });
    });
</script>


<!-- Light-box css -->
<!-- //simple-lightbox -->

</body>
</html>
